<template>
  <div class="total">
    <bigTitle msg="设置" />
    <tip msg="您可以在此部署新节点、对容器进行管理" />
    <div class="height" style="height: 10px"></div>
    <bigTitle msg="新增边缘节点" />
    <tip
      style="color: #3e7cf4"
      msg="请复制以下命令粘贴到可以访问IP的节点上，然后手动刷新管理系统"
    />
    <div v-if="addCmd" class="container">{{ addCmd }}</div>
    <bigTitle msg="删除函数" />
    <tip msg="请谨慎操作！" />
    <div v-if="del_index > -1" class="container del_container">
      是否要删除函数{{ total_func[del_index].name }}
      <div @click="confirmDel" class="del_btn">确认</div>
      <div
        @click="cancel"
        class="del_btn"
        style="background: rgba(62, 124, 244, 0.1); color: #3e7cf4"
      >
        取消
      </div>
    </div>
    <div class="del_function">
      <div
        class="container"
        v-for="(item, index) in total_func"
        v-bind:key="item"
      >
        {{ item.name }}
        <div @click="del(index)" class="delete_btn">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import bigTitle from "../component/title.vue";
import tip from "../component/tip.vue";
import { post } from "../../Middleware/mid_request";
export default {
  methods: {
    confirmDel() {
      post({
        url: "/del_func",
        data: {
          name: this.$data.total_func[this.$data.del_index].name,
        },
        success: (res) => {
          this.$data.del_index = -1;
          setTimeout(() => {
            this.getInitData();
          }, 1000);
        },
      });
    },
    cancel() {
      this.$data.del_index = -1;
    },
    del(idx) {
      this.$data.del_index = idx;
    },
    getInitData() {
      post({
        url: "/get_function_total",
        success: (res) => {
          this.$data.total_func = res.data.data.sort((a, b) => {
            return a.run_time - b.run_time;
          });
        },
      });
      post({
        url: "/get_setting_config",
        success: (res) => {
          this.$data.addCmd = res.data.data;
        },
      });
    },
  },
  created() {
    this.getInitData();
  },
  name: "settingPage",
  props: {
    msg: String,
  },
  data() {
    return {
      del_index: -1,
      addCmd: "",
      total_func: [],
    };
  },
  components: {
    bigTitle,
    tip,
  },
};
</script>

<style scoped>
.del_container {
  align-self: flex-start;
}
.del_btn {
  width: 150px;
  height: 40px;
  background: #3e7cf4;
  border-radius: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-left: 10px;
  cursor: pointer;
}
.delete_btn:hover {
  opacity: 0.5;
}
.delete_btn {
  transition: 0.2s;
  cursor: pointer;
  color: #3e7cf4;
  font-size: 14px;
  margin-left: 20px;
}
.del_function {
  display: flex;
  flex-wrap: wrap;
}
.container {
  color: black;
  display: flex;
  align-items: center;
}
.total {
  font-size: 30px;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
</style>